<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
    <title>机匣子</title>
    <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <![endif]-->
    <link rel="shortcut icon" href="favicon.ico">
    <link href="css/jixiazi.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="pc">
    <section id="page1" class="panel cur" data-section-name="home1">
        <div class="contain">
            <nav>
                <a href="index.html"><img src="img/logo.png" width="130" class="logo"></a>
                <div class="menu">
                    <ul>
                        <li><a href="index.html">首页</a></li>
                        <li><a href="#">联系我们</a></li>
                        <li><a href="#">关于我们</a></li>
                        <li style="line-height: 40px;color:#333">报案电话：<strong style="color:#35b1fa">4006708670</strong></li>
                    </ul>
                </div>
            </nav>

            <div class="page1_img1">
                <img src="img/page1_img1.png" width="420">
            </div>

            <div class="page1_img2">
                <img src="img/page1_img2.png" width="422">
            </div>

            <div class="btndiv">
                <div class="page1_btnIos">
                    <button type="button" class="btn">IOS 版下载</button>
                </div>
                <div class="page1_btnAndroid">
                    <button type="button" class="btn">Android版下载</button>
                </div>
            </div>

        </div>

    </section>

    <section id="page2" class="panel" data-section-name="home2">
        <div class="contain">
            <div class="page2_text">
                <img src="img/page2_text.png" width="808">
            </div>
            <div class="page2_img">
                <img src="img/page2_img.png" width="">
            </div>
        </div>

    </section>

    <section id="page3" class="panel" data-section-name="home3">
        <div class="contain">
            <div class="page3_text">
                <img src="img/page3_text.png" width="790">
            </div>

            <div class="page3_img1">
                <img class="page3_img_dipan" src="img/page3_img_dipan.png" width="488">
                <img class="page3_img_gaizi" src="img/page3_img_gaizi.png" width="514">

                <img class="page3_img_jian page3_img_jian1" src="img/page3_img_jian.png" width="111">
                <img class="page3_img_jian page3_img_jian2" src="img/page3_img_jian.png" width="70">
                <img class="page3_img_jian page3_img_jian3" src="img/page3_img_jian.png" width="90">

                <img class="page3_img_dj" src="img/page3_img_dj.png" width="347">
                <img class="page3_img_dun" src="img/page3_img_dun.png" width="127">
            </div>

            <div class="page3_img2">
                <img src="img/page3_img2.png" width="">
            </div>

        </div>
    </section>

    <section id="page4" class="panel" data-section-name="home4">
        <div class="contain">
            <div class="page4_text">
                <img src="img/page4_text.png" width="944">
            </div>
            <div class="page4_img1">
                <img src="img/page4_img1.png" width="1000">
            </div>
            <div class="page4_chaoren">
                <img src="img/chaoren.png" width="900">
            </div>
        </div>
    </section>
    <footer>
        <div>Copyright©2016 juqing.com All Rights Reserved 杭州巨擎科技有限公司</div>
    </footer>
</div>

<!--二维码遮罩层-->
<div class="ewm_mask">
    <div class="con">
        <div class="ewm"><img src="img/ewm.png" width="308"></div>
        <div style="margin-top: 20px">
            扫描二维码<br>
            打开链接下载手机客户端
        </div>
        <img class="close" src="img/close.png" width="56">
    </div>
</div>

<div id="mobile">
    <header id="header" class="header">
        <h1 class="page-title"><img style="margin: 10px"  src="img/logo.png" width="130"><span id="panelSwitch" class="btn-list fr"></span></h1>
        <div class="menu_mb" style="display: none">
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="#">联系我们</a></li>
                <li><a href="#">关于我们</a></li>
                <li style="line-height: 40px;color:#fff;padding-right: 10px">报修电话：<strong>4006708670</strong></li>
            </ul>
        </div>
    </header>
    <section>
        <div class="page page1" style="margin-top:30px">

                <div class="page1_img">
                    <img class="img1"  data-original="img/page1img.jpg" src="img/loading.png" width="100%">
                </div>

                <div class="btndiv" style="margin: 20px 0">
                    <div class="page1_btnIos">
                        <button type="button" class="btn">IOS 版下载</button>
                    </div>
                    <div class="page1_btnAndroid" style="margin-top: 20px">
                        <button type="button" class="btn">Android版下载</button>
                    </div>
                </div>

        </div>
        <div class="page page2">
            <div class="text">
                <img  data-original="img/page2_text.png" src="img/loading.png" width="100%">
            </div>
            <div class="pic">
                <img  data-original="img/page2_img.png" src="img/loading.png" width="100%">
            </div>
        </div>
        <div class="page page3">
            <div class="text">
                <img  data-original="img/page3_text.png" src="img/loading.png" width="100%">
            </div>

            <div class="pic">
                <img  data-original="img/page3img.png" src="img/loading.png" width="100%">
            </div>

            <div class="picbg">
                <img  data-original="img/page3_img2.png" src="img/loading.png" width="100%">
            </div>
        </div>
        <div class="page page4">
            <div class="text">
                <img  data-original="img/page4_text.png" src="img/loading.png" width="100%">
            </div>
            <div class="pic" style="margin-left: 20px">
                <img  data-original="img/chaoren.png" src="img/loading.png" width="100%">
            </div>
            <div class="picbg">
                <img  data-original="img/page4_img1.png" src="img/loading.png" width="100%">
            </div>

        </div>
    </section>
</div>
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.easing.1.3.js"></script>
    <script src="js/scrollify.min.js"></script>
    <script src="js/prefixfree.min.js"></script>
    <script src="js/jquery.lazyload.js"></script>
    <script>
        $(function() {
           init();
            $(window).resize(function () {
                init();
            });
            function  init() {
                var windowWidth = $(window).width();
                if(windowWidth<=768){
                    $(".page img").lazyload({
                        effect: "fadeIn"
                    });

                    $('#mobile').css('z-index','1');
                    $('#pc').css({'z-index':'0','height':'0','overflow':'hidden'});
                    $('.page1').css('marginTop','0');
                }else{console.log('pc');
                    $.scrollify({
                        section:".panel",
                        sectionName : "section-name",
                        scrollSpeed: 100,
                        after:function (index) {
                             console.log(index);
                            $('.panel').removeClass('cur');
                            $('.panel').eq(index).addClass('cur')
                        }
                    });console.log('pc2');
                    $('#pc').css('z-index','1');
                    $('#mobile').css({'z-index':'0','height':'0','overflow':'hidden'});

                }
            }

            $(".panel").css({"height":$(window).height()});

            $('.btn').click(function () {
                //$('.ewm_mask').show()
                $('.ewm_mask').addClass('show');
            });

            $('.close').click(function () {
                $('.ewm_mask').removeClass('show');
            });

            /*手机端*/
            $('#panelSwitch').on('touchend',function (e) {e.preventDefault();
                $('.menu_mb').slideToggle();
            });
          /*  $('.btn').on('touchend',function (e) {e.preventDefault();
                $('.ewm_mask').addClass('show');
            });*/
        });
    </script>

    <script src='//kefu.easemob.com/webim/easemob.js?tenantId=22301&hide=false&sat=false' async='async'></script>
</body>
</html>